<template>
  <div id="app">
    <!-- 顶部导航栏 start -->
    <div id="nav">
      <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp">
        <top-bar v-show="!$route.meta.hideTopBar"></top-bar>
      </transition>
      <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp">
        <detail-bar v-show="$route.meta.hideDetailBar"></detail-bar>
      </transition>
      <!-- <login-bar></login-bar> -->
    </div>
    <!-- 顶部导航栏 end -->

    <!-- </div> -->
    <div class="comment">
      <transition
        enter-active-class="animated fadeInRight"
        leave-active-class="animated fadeOutRight"
      >
        <router-view></router-view>
      </transition>
    </div>
    <!-- 底部导航栏 start -->
    <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp">
      <bottom-bar v-show="!$route.meta.hideBottomBar"></bottom-bar>
    </transition>
    <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp"></transition>
    <!-- <cart-bottom v-show="$route.meta.hideCartBottom"></cart-bottom> -->
    <!-- <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp">
      <detail-bottom v-show="$route.meta.hideDetailBottom"></detail-bottom>
    </transition> -->
  </div>
</template>

<style lang="less">
* {
  padding: 0px;
  margin: 0px;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.comment {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}
</style>
<script>
import TopBar from "./components/TopBar";
// import CartBar from "./components/CartBar";
import BottomBar from "./components/BottomBar";
// import CartBottom from "./components/CartBottom";
// import DetailBottom from "./components/DetailBottom";
import DetailBar from "./components/DetailBar";
// import SearchComponent from './components/SearchComponent'

export default {
  components: {
    TopBar,
    // CartBar,
    BottomBar,
    // CartBottom,
    // DetailBottom,
    DetailBar
    // SearchComponent
  }
};
</script>
